<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="75"
          class="search-form"
        >
          <Form-item label="地区">
            <regionArea
              ref="region"
              style="width: 350px"
              :showIs="true"
              @selected="selectedRegion"
            />
          </Form-item>

          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >

          <Button class="search-btn" type="primary" @click="handleReset"
            >重置</Button
          >
        </Form>
      </Row>
      <!-- 总额 -->
      <p class="titleCount">
        平台总额： <span>{{ allData.czHbZe }}</span>
      </p>
      <Table
        :loading="loading"
        border
        width="400"
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <!-- 支出 -->
      <p class="titleCount">
        钱包余额总额： <span>{{ allData.qbYeZe }}</span>
      </p>
      <Table
        :loading="loading"
        border
        width="200"
        :columns="columnsZC"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <!-- B端会员总额 -->
      <Table
        :loading="loading"
        border
        width="800"
        :columns="BcolumnsZC"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <!-- 天使会员余额 -->
      <Table
        :loading="loading"
        border
        width="600"
        :columns="TScolumnsZC"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <!-- 事业会员钱包余额 -->
      <Table
        :loading="loading"
        border
        width="600"
        :columns="SYcolumnsZC"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <!-- 区域代理钱包余额  -->
      <Table
        :loading="loading"
        border
        width="800"
        :columns="columnsQY"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <!-- 剩余 -->
      <p class="titleCount">
        平台的账户余额： <span>{{ allData.ptHbYeZe }}</span>
      </p>
      <Table
        :loading="loading"
        border
        width="600"
        :columns="columnsSY"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
    </Card>
  </div>
</template>

<script>
import { getPTMemberAlltoHB } from "@/api/report.js";
import regionArea from "@/views/agent-manage/region";

export default {
  name: "ptzjhz_huanbei",
  components: {
    regionArea,
  },
  data() {
    return {
      loading: true, // 表单加载状态
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        regionId: [],
      },
      outSelectDate: [], // 起止时间
      columns: [
        {
          title: "充值兑换总额",
          key: "zcHb",
          align: "center",
          width: "100",
        },
        {
          title: "会员费总额",
          key: "dkfHb",
          align: "center",
          width: "100",
        },
      ], //总额
      columnsZC: [
        {
          title: "C端充值余额",
          key: "cCzYe",
          align: "center",
          width: "130",
        },
      ], //支出c端值余额
      BcolumnsZC: [
        {
          title: "B端会员钱包余额",
          key: "bYeZ",
          align: "center",
          width: "100",
        },
        {
          title: "充值余额",
          key: "bCzYe",
          align: "center",
          width: "100",
        },
        {
          title: "推广余额",
          key: "bTgYe",
          align: "center",
          width: "100",
        },
        {
          title: "销售余额",
          key: "bXsYe",
          align: "center",
          width: "100",
        },
      ], //B端会员钱包余额
      TScolumnsZC: [
        {
          title: "天使会员钱包余额",
          key: "tsYeZ",
          align: "center",
          width: "100",
        },
        {
          title: "充值余额",
          key: "tsCzYe",
          align: "center",
          width: "100",
        },
        {
          title: "推广余额",
          key: "tsTgYe",
          align: "center",
          width: "100",
        },
      ],
      SYcolumnsZC: [
        {
          title: "事业会员钱包余额",
          key: "syYeZ",
          align: "center",
          width: "100",
        },
        {
          title: "充值余额",
          key: "syCzYe",
          align: "center",
          width: "100",
        },
        {
          title: "推广余额",
          key: "syTgYe",
          align: "center",
          width: "100",
        },
      ], //事业会员钱包余额
      columnsSY: [
        {
          title: "充值钱包余额",
          key: "ptCzHb",
          align: "center",
          width: "130",
        },
        {
          title: "分佣总额",
          key: "ptTgHbZ",
          align: "center",
          width: "100",
        },
        {
          title: "提现收回总额度",
          key: "ptTxHsHb",
          align: "center",
          width: "100",
        },
      ],
      // 区域代理钱包余额
      columnsQY: [
        {
          title: "区域代理钱包余额",
          key: "qyYeZ",
          align: "center",
          width: "100",
        },
        {
          title: "充值余额",
          key: "qyCzYe",
          align: "center",
          width: "100",
        },
        {
          title: "推广余额",
          align: "center",
          children: [
            {
              title: "推广会员费余额",
              key: "qyTgHyYe",
              align: "center",
              width: "100",
            },
            {
              title: "推广会服务费余额",
              key: "qyTgFwYe",
              align: "center",
              width: "100",
            },
          ],
        },
      ],
      data: [], // 表单数据
      allData: {}, //合计数据
    };
  },
  methods: {
    // 起止时间从新赋值
    outSelectDateRange(v) {
      if (v) {
        this.searchForm.startTime = v[0];
        this.searchForm.endTime = v[1];
      }
    },
    // 选中的地址
    selectedRegion(val) {
      this.searchForm.regionId = val[0];
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },
    // 重置
    handleReset() {
      this.searchForm = {
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        regionId: [],
      };
      this.$refs.region.addr = [];
      this.getData();
    },
    //查询会员列表
    getData() {
      this.loading = true;
      this.searchForm.regionId = this.searchForm.regionId.toString();
      getPTMemberAlltoHB(this.searchForm).then((res) => {
        if (res.result) {
          this.loading = false;
          this.data = [];
          this.data = res.result;
          this.allData = res.result[0];
        }
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
/deep/ .ivu-table-wrapper {
  width: 100%;
}

/deep/ .ivu-card {
  width: 100%;
}

.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.item {
  width: 350px !important;
  display: flex;

  > * {
    margin: 0 4px;
  }
}
.titleCount {
  font-size: 24px;
  margin-top: 20px;
  span {
    font-weight: bold;
  }
}
</style>
